<template>
  <div ref="chartDom" style="width: 600px; height: 400px;"/>
</template>

<script setup>
import {nextTick, onMounted, onUnmounted, ref} from 'vue';
import * as echarts from 'echarts';

const chartDom = ref(null);
let chartInstance = null;

onMounted(async () => {
  await nextTick();
  chartInstance = echarts.init(chartDom.value);
  const option = {
    xAxis: {
      name: '人均职工薪酬（万元）',
      min: 0,   // Adjust this to set the starting value of the x-axis
      max: 50,  // Adjust this to set the ending value of the x-axis
      splitNumber: 2,  // Number of intervals; setting it to 2 will give you 4 quadrants
      axisLine: {
        onZero: true  // Ensure the x-axis crosses the y-axis at 0
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      name: '人均利润总额（对标值）',
      min: 0,   // Adjust this to set the starting value of the y-axis
      max: 50,  // Adjust this to set the ending value of the y-axis
      splitNumber: 2,  // Number of intervals; setting it to 2 will give you 4 quadrants
      axisLine: {
        onZero: true  // Ensure the y-axis crosses the x-axis at 0
      },
      splitLine: {
        show: false
      }
    },
    series: [{
      type: 'scatter',
      data: [
        [10, 20], [20, 30], [15, 35], [30, 15], [25, 50],
        [35, 40], [50, 25], [40, 30], [45, 20], [20, 10]
      ]
    }],
    graphic: [
      {
        type: 'rect',
        left: 'center',
        top: 'center',
        z: -10,
        shape: {
          width: 10000,
          height: 10000
        },
        style: {
          fill: '#d3e7fa'
        }
      },
      {
        type: 'rect',
        left: '50%',
        top: 'center',
        z: -10,
        shape: {
          width: 10000,
          height: 10000
        },
        style: {
          fill: '#e3f2fd'
        }
      },
      {
        type: 'rect',
        left: 'center',
        top: '50%',
        z: -10,
        shape: {
          width: 10000,
          height: 10000
        },
        style: {
          fill: '#eaf4fc'
        }
      },
      {
        type: 'rect',
        left: '50%',
        top: '50%',
        z: -10,
        shape: {
          width: 10000,
          height: 10000
        },
        style: {
          fill: '#f1f9ff'
        }
      }
    ],
    grid: {
      containLabel: true
    }
  };
  chartInstance.setOption(option);
});

onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>

</style>